<template>
  <div>
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="更多应用"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div>
      <img class="top" src="http://www.zlllcy.com/img/icon/top2.jpg" alt="" />
    </div>
    <!-- 主体容器 -->
    <div class="container">
      <!-- 我的应用 -->
      <div class="my">
        <!-- 我的应用 编辑 -->
        <div class="top myApplication">
          <b>我的应用</b>
          <span>编辑</span>
        </div>
        <!-- 预约挂号 报告 取号 诊间支付... -->
        <div class="items">
          <div class="item">
            <img
              @click="toPerfect"
              src="http://www.zlllcy.com/images/5.png"
              alt=""
            />
            <span>预约挂号</span>
          </div>
          <div class="item">
            <img src="http://www.zlllcy.com/images/1.png" alt="" />
            <span>报告查询</span>
          </div>
          <div class="item">
            <img
              @click="toKnowledge"
              src="http://www.zlllcy.com/images/3.png"
              alt=""
            />
            <span>科普知识</span>
          </div>
        </div>
      </div>
      <!-- 就医服务 -->
      <div class="my service">
        <!-- 我的应用 编辑 -->
        <div class="top">
          <b>就医服务</b>
        </div>
        <!-- 预约挂号 报告 取号 诊间支付... -->
        <div class="items">
          <div class="item">
            <img src="http://www.zlllcy.com/images/5.png" alt="" />
            <span>预约挂号</span>
          </div>
          <div class="item">
            <img src="http://www.zlllcy.com/images/1.png" alt="" />
            <span>报告查询</span>
          </div>
          <div class="item">
            <img src="http://www.zlllcy.com/images/3.png" alt="" />
            <span>取号排队</span>
          </div>
          <div class="item">
            <img src="http://www.zlllcy.com/images/6.png" alt="" />
            <span>心理健康</span>
          </div>
        </div>
      </div>
      <!-- 我的工具 -->
      <div class="my">
        <!-- 我的应用 编辑 -->
        <div class="top">
          <b>我的工具</b>
        </div>
        <!-- 预约挂号 报告 取号 诊间支付... -->
        <div class="items">
          <div class="item">
            <img src="http://www.zlllcy.com/images/5.png" alt="" />
            <span>预约挂号</span>
          </div>
          <div class="item">
            <img src="http://www.zlllcy.com/images/1.png" alt="" />
            <span>报告查询</span>
          </div>
          <div class="item">
            <img src="http://www.zlllcy.com/images/3.png" alt="" />
            <span>取号排队</span>
          </div>
          <div class="item">
            <img src="http://www.zlllcy.com/images/6.png" alt="" />
            <span>心理健康</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 引入顶部导航
import Vue from "vue";
import { NavBar } from "vant";
Vue.use(NavBar);

export default {
  data() {
    return {};
  },
  methods: {
    onClickLeft() {
      this.$router.push("/");
    },
    onClickRight() {},
    // 返回首页按钮
    tomore() {
      
    },
    // 进入疫苗预约  完善个人信息
    toPerfect() {
      this.$router.push("/Perfect");
    },
    // 进入疫苗科普
    toKnowledge() {
      this.$router.push("/Knowledge");
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/scss/public.scss";

// 顶部导航
.navbar {
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  text-align: center;
  color: #fff;
  letter-spacing: 0.1rem;
  background-color: #0090ff;
  img {
    width: 25px;
    position: absolute;
    left: 10px;
    top: 10px;
  }
}

// 顶部图片部分
.top {
  width: 100%;
}
// 主体容器
.container {
  padding: 0 10px;
  //  我的应用
  .my {
    .top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;

      b {
        font-size: 18px;
        font-weight: normal;
      }
      span {
        font-size: 16px;
        color: #0090ff;
      }
    }
    //   列表项
    .items {
      display: flex;
      // justify-content: space-around;
      flex-wrap: wrap;
      .item {
        width: 80px;
        display: flex;
        // 主轴为垂直方向，起点在上沿
        flex-direction: column;
        justify-content: center;
        align-items: center;
        // justify-content: space-around;
        margin-right: 10px;
        margin-bottom: 15px;
        img {
          width: 35px;
          margin-bottom: 10px;
        }
        span {
          font-size: 14px;
          color: #6b6b6b;
          //   display: inline;
        }
      }
      .item:nth-child(4n) {
        margin-right: 0;
      }
    }
  }

  //   我的应用 编辑
  .myApplication {
    margin-top: 30px;
  }

  // 就医服务
  .service {
    margin: 50px 0;
  }
}
</style>